<template>
    <span :class="['wx_text',isMe?'isMe':'isCus']">
      <template v-for="(item,k) in str2arr">
        <span v-if="!item.isStockCode" v-html='item.html' :key='k'></span>
        <u class="text-blue text-pointer"
          v-if="item.isStockCode" v-html='item.html' :key='k'
          @click="getKGKP(item.html)">
        </u>
      </template>
      <el-drawer
        title="千股千评速查"
        :visible.sync="dialogVisible"
        direction="ltr"
        :append-to-body="true"
        :before-close="handleClose"
        :size="isMobile?300:600"
        >
        <div style="margin:15px">
          <el-input v-model="stockCode" clearable disabled>
            <div slot="prepend" v-if="!isMobile">{{placeholder}}</div>
            <el-button slot="append" icon="el-icon-search" disabled></el-button>
          </el-input>
          <div v-loading="loading"  style="margin-top:15px">
            <div v-html="html_1"></div>
            <div v-html="html_2"></div>
            <div class="align-rm">
              <el-button size="mini" type="primary"
                icon="el-icon-document-copy"
                @click="copy">快捷复制</el-button>
            </div>
            <p>{{buyAdvice}}</p>
            <p>{{holdAdvice}}</p>
            <p>{{sellAdvice}}</p>
          </div>
        </div>
        <!-- {{draftClipboard}} -->
      </el-drawer>
    </span>
</template>

<script>
import { emoji,ruleStr,emojiReplace } from './../assets//emoticon.js';
// import WxText from './wx_text.vue';
import { mapState, mapMutations } from 'vuex';
import 千股千评 from './千股千评.vue';

const EXP1 = new RegExp(/(\d{6}(?!\d))/);
const EXP2 = new RegExp(/\d/);

export default {
  mixins: [千股千评],
  props:{
    isMe:{
      type:Boolean,
      default:function(){
        return false;
      }
    },
    obj:{
      content:String
    },
  },
  computed:{
    ...mapState([
      'isMobile', 'mobileView',
    ]),
    str2arr:function(){
      let html = this.obj.content.replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\\n/g, '<br>');
      let str = emojiReplace(html);
      return str.split(EXP1).reduce((t,v,i,a)=>{
        let prevStr = i > 0 ? a[i-1] : 'a';//这里的a无实际意义，任意非数字字符都可以；
        let lastStr = prevStr[prevStr.length-1];
        t.push({
          isStockCode:EXP1.test(v) && !EXP2.test(lastStr),
          html:v,
        })
        return t;
      },[])
    },
  },
  data(){
    return {
      msgtype:'text',
      stockCode:'',
      placeholder:`请输入正确的股票代码`,
      dialogVisible: false,
      isShow:true,

    }
  },
  methods:{
    handleClose(){
      this.reset();
      this.stockCode = '';
      this.isShow = false;
      this.dialogVisible = false;
    },
    getKGKP(stockCode){
      this.stockCode = stockCode;
      this.sharesQuery(stockCode).then((res)=>{
        if(res.data.code == 200){
          console.log(res)
          this.dialogVisible = true;
        }else{
          this.dialogVisible = false;
        }
      });
    },
  },
  mounted(){},
}
</script>

<style lang="less" scoped>

.wx_text{
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 16px;
  line-height:22px;
  margin:0 12px;
  padding:6px 12px;
  color:#111;
  white-space: pre-wrap;
  &.isMe{
    background-color:#E6F7FF;
    border-radius: 16px 0 16px 16px;
  }
  &.isCus{
    background-color: #eee;
    border-radius: 0px 16px 16px 16px;
  }
}
.text-pointer{
  cursor: help;
}
</style>